<template>
  <a-row :gutter="10">
    <a-col :span="16">
      <a-input v-model="value"/>
    </a-col>
    <a-col :span="8" style="height:40px;">
      <color-picker v-model="value" defaultColor="transparent" style="margin-top:6px;"/>
    </a-col>
  </a-row>
</template>

<script>
  
  export default {
    name: 'SColorPicker',
    props:{
      value:{
        type: String,
        required: false
      }
    },
    watch:{
      value:{
        immediate:true,
        handler:function(){
          this.initVal();
        }
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    data(){
      return {
        inputVal:''
      }
    },
    methods:{
      initVal(){
        this.$emit("change", this.value)
      }
    }
  }
</script>

<style lang="less">
  #components-layout-demo-custom-trigger .m-colorPicker .box {
    right: 0px;
    top: 26px;
  }
</style>